<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" ref="customerInformation" :rules="type !== 'detail' ? rules : {}" label-width="100px" :label-position="type == 'detail' ? 'right' : 'top'">
      <h4 v-if="form.recoveryProgress" style="font-weight: bold; text-align: right; color: #409eff; border-bottom: 1px solid #e9e9e9; padding-bottom: 5px; box-sizing: border-box">
        <dict-tag :options="dict.type.receiving_progress" :value="form.recoveryProgress" />
      </h4>
      <div class="card-title-wrap">
        <span>客户信息</span>
        <span></span>
      </div>
      <div :style="{ marginLeft: type == 'detail' ? '' : '50px' }" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 70%; margin-top: 20px">
        <el-form-item label="客户名称:" prop="customerName" style="min-width: 45%">
          <el-input v-if="type !== 'detail'" style="width: 90%" v-model="form.customerName" readonly placeholder="选择客户后自动带出" @click.native="changeUser"></el-input>
          <span v-if="type == 'detail'">{{ form.customerName }}</span>
        </el-form-item>
        <el-form-item label="客户类型:" prop="customerType" style="min-width: 45%">
          <dict-tag :options="dict.type.customer_type" :value="form.customerType" :class="type == 'detail' ? '' : 'cur'" />
        </el-form-item>
      </div>
    </el-form>
    <!-- 添加或修改测试单表对话框 -->
    <el-dialog title="选择客户" :visible.sync="open" append-to-body class="form-dialog" width="60%">
      <SearchContent :queryParams="queryParamsDig" @query="handleQueryDig" @reset="resetQueryDig">
        <el-form :model="queryParamsDig" label-width="100px">
          <el-col :span="9">
            <el-form-item label="客户名称:">
              <el-input style="width: 100%" v-model="queryParamsDig.customerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="手机号码:">
              <el-input style="width: 100%" v-model.trim="queryParamsDig.customerPhone" maxlength="11" @input="queryParamsDig.customerPhone = queryParamsDig.customerPhone.replace(/[^\d]/g, ' ')"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </SearchContent>
      <el-row>
        <table-page ref="el-table" :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParamsDig.pageNum" :limit.sync="queryParamsDig.pageSize" @setSizeCurrent="getList">
          <!-- 操作插槽 -->
          <template slot="tableColAc">
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="text" @click="selectCustomer(scope.row)">选择客户</el-button>
              </template>
            </el-table-column>
          </template>
          <!-- 普通列插槽 -->
          <template slot="tableCol">
            <el-table-column label="客户名称" align="center" prop="customerName" min-width="140px" show-overflow-tooltip />
            <el-table-column label="客户类型" align="center" prop="customerType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
              </template>
            </el-table-column>
            <el-table-column label="联系电话" align="center" prop="customerPhone" />
            <el-table-column label="待委外收车数" align="center" prop="numberOfCarsToBeShippedOut" min-width="50px" show-overflow-tooltip />
          </template>
        </table-page>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { selectCustomerList } from '@/api/pickUpTheCar'
import SearchContent from '@/components/SearchContent/index.vue'
export default {
  // 客户信息
  name: 'customerInformation',
  dicts: ['receiving_progress', 'customer_type'],
  components: {
    SearchContent,
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      rules: {
        customerName: [
          {
            required: true,
            message: '请选择客户',
            trigger: 'change',
          },
        ],
      },
      open: false,
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      dataList: [],
      loading: false,
      total: 0,
    }
  },
  created() {},
  methods: {
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
    // 点击选择客户
    changeUser() {
      this.open = true
      this.getList()
    },
    // 选择客户
    selectCustomer(row) {
      this.open = false
      this.$set(this.form, 'customerName', row.customerName)
      this.$set(this.form, 'customerType', row.customerType)
      this.$set(this.form, 'customerId', row.customerId)
      this.$set(this.form, 'operateType', row.operateType)
      this.$set(this.form, 'carList', [])
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      selectCustomerList(this.queryParamsDig).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false
        }
      })
    },
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    handleQueryDig() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.cur {
  min-height: 32px;
  border: 1px solid #dcdfe6;
  color: #606266;
  box-sizing: border-box;
  border-radius: 6px;
  padding-left: 10px;
}
</style>
